<template>
  <div class="article-item">
    <van-cell :to="`/article/${article.art_id}`">
      <div slot="label">
        <div
          v-if="article.cover.type===3"
          class="ttt"
        >
          <van-image
            v-for="(item,index) in article.cover.images"
            :src="item"
            :key="index"
            fit="cover"
          />
        </div>
        <div class="label-wrap">
          <span>{{article.aut_name}}</span>
          <span>{{article.comm_count}}评论</span>
          <span>{{article.pubdate | relativeTime}}</span>
        </div>
      </div>
      <!-- 标题 -->
      <div
        slot="title"
        class="title van-multi-ellipsis--l2"
      >{{article.title}}</div>
      <div
        class="one"
        v-if="article.cover.type===1"
      >
        <van-image
          :src="article.cover.images[0]"
          fit="cover"
        />
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {}
}
</script>

<style scoped lang="less">
.van-image {
  width: 230px !important;
  height: 150px !important;
  .img {
    width: 100%;
  }
}
/deep/ .ttt {
  display: flex;
  padding: 30px 0;
  .van-image {
    flex: 1;
    padding-right: 4px !important;
  }
}
.van-cell__value {
  flex: unset;
  width: 230px !important;
  height: 150px !important;
  padding-left: 25px;
}
.title {
  font-size: 32px;
  color: #000;
}
.one {
  padding-left: 10px;
}
.label-wrap span {
  font-size: 22px;
  color: #b4b4b4;
  margin-right: 26px;
}
.zhanwei {
  height: 60px;
}
.van-cell__title {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
</style>
